<template>
  <div>
    <!--轮播图-->
    <div class="carousel">
      <img width="235px" style="position: absolute;left: 30px" src="../assets/logo2.png" alt="">
      <el-col :span="24">
        <el-carousel :interval="5000" arrow="always">
          <el-carousel-item v-for="(item,index) in carouselItems" :key="index">
            <el-col :span="24" class="carouselPage" >
              <el-col :span="24">{{item.items[carouselActive].title}}</el-col>
              <el-col :span="24">{{item.items[carouselActive].introduction}}</el-col>
              <el-col :span="24">
                <div>
                  <el-col :span="6" v-for="(item1,index1) in item.items" :key="index1">
                    <div @mouseover="carouselMouseOver(item,index1)">
                      <img :src="item1.url" alt="">
                    </div>
                  </el-col>
                </div>
              </el-col>
            </el-col>
          </el-carousel-item>
        </el-carousel>
      </el-col>
    </div>

    <!--出版图书-->
    <el-row style="text-align: center" class="main" >
      <el-col :span="24">
        <h2>出版图书</h2>
        <p>
          <a href="">小说</a>|
          <a href="">励志成功</a>|
          <a href="">经理管理学</a>|
          <a href="">更多</a>
        </p>
      </el-col>
      <el-col :span="24" class="content" v-model="publish">
        <div></div>
        <!--    左    -->
        <el-col :span="8" class="left" >
          <h3><a href="">{{publish.bookDetail.title}}</a></h3>
          <p>作者: {{publish.bookDetail.author}}</p>
          <p>{{publish.bookDetail.introduction}}</p>
          <div>
            <img :src="publish.bookDetail.url" alt="">
          </div>
        </el-col>
        <!--    中    -->
        <el-col :span="8" class="center">
          <el-col :span="12" v-for="p in publish.publishLeft">
            <div class="imgList"><img :src="p.url" alt=""></div>
            <p>{{p.title}}</p>
            <p>{{p.author}}</p>
          </el-col>
        </el-col>
       <!--   右     -->
        <el-col :span="8" class="right">
          <el-col :span ="24">
            <el-col :span="12"></el-col>
            <el-col :span="12">畅销榜</el-col>
          </el-col>
          <ul>
            <li v-for="(item,index) in items" :key="index" @mouseover="mouseOver(index)">
              <el-col :span="24" class="close" v-if="displayShow != index">
                <el-col :span="2">{{index + 1}}</el-col>
                <el-col :span="22">
                  <el-col :span="15" class="bookName">{{item.author}}</el-col>
                  <el-col :span="9" class="lookNum">
                    <el-col :span="12"></el-col>
                    <el-col :span="12">{{item.sales}}</el-col>
                  </el-col>
                </el-col>
              </el-col>
              <el-col :span="24" class="open" v-if="displayShow == index">
                <el-col :span="2">{{index + 1}}</el-col>
                <el-col :span="22">
                  <el-col :span="11" class="bookImg"><img :src="item.url" alt=""></el-col>
                  <el-col :span="13">
                    <el-col :span="24" class="bookName">{{item.author}}</el-col>
                    <el-col :span="24" class="lookNum">
                      <el-col :span="12"></el-col>
                      <el-col :span="12">{{item.sales}}</el-col>
                    </el-col>
                  </el-col>
                </el-col>
              </el-col>
            </li>
          </ul>
        </el-col>
      </el-col>
    </el-row>
    <!--  精选圈子  -->
    <el-row class="sel_Cir" style="text-align: center">
      <el-col :span="24">
        <h2>精选圈子</h2>
      </el-col>
      <el-col :span="24">
        <el-col :span="24" class="cirBig">
          <el-col :span="8"  v-for="i in circleList" >
            <div @click="goQircle(i.id)">
              <img :src="i.url" alt="">
            </div>
            <div @click="goQircle(i.id)">{{i.circleName}}</div>
            <div>{{i.description}}</div>
            <div>
              <span></span>
              <span>{{i.member}}</span>
              <span></span>
              <span>{{i.invitations}}</span>
            </div>
          </el-col>

        </el-col>

      </el-col>
    </el-row>
    <!--  男生频道  -->
    <el-row class="boy"  style="text-align: center" v-model="man">
      <el-col :span="24">
        <h2>男生频道</h2>
        <p>
          <a href="">玄幻</a>|
          <a href="">奇幻</a>|
          <a href="">武侠</a>|
          <a href="">仙侠</a>|
          <a href="">更多</a>
        </p>
      </el-col>
      <el-col :span="24" class="content">
        <div></div>
        <!--    左    -->
        <el-col :span="8" class="boyLeft" >
          <h3><a href="">{{man.bookdetail.title}}</a></h3>
          <p>作者: {{man.bookdetail.author}}</p>
          <p>{{man.bookdetail.introduction}}</p>
          <div>
            <img :src="man.bookdetail.url" alt="">
          </div>
        </el-col>
        <!--    中    -->
        <el-col :span="8" class="boyChannel">
          <el-col :span="12" v-for="i in man.mangender">
            <div >{{i.title}}</div>
            <p>{{i.author}}</p>
            <p>{{i.introduction}}</p>
          </el-col>
        </el-col>
        <!--   右     -->
        <el-col :span="8" class="right">
          <el-col :span ="24">
            <el-col :span="12"></el-col>
            <el-col :span="12">畅销榜</el-col>
          </el-col>
          <ul>
            <li v-for="(item,index) in items1" :key="index" @mouseover="mouseOver1(index)">
              <el-col :span="24" class="close" v-if="displayShow1 != index">
                <el-col :span="2">{{index + 1}}</el-col>
                <el-col :span="22">
                  <el-col :span="15" class="bookName">{{item.author}}</el-col>
                  <el-col :span="9" class="lookNum">
                    <el-col :span="12"></el-col>
                    <el-col :span="12">{{item.sales}}</el-col>
                  </el-col>
                </el-col>
              </el-col>
              <el-col :span="24" class="open" v-if="displayShow1 == index">
                <el-col :span="2">{{index + 1}}</el-col>
                <el-col :span="22">
                  <el-col :span="11" class="bookImg"><img :src="item.url" alt=""></el-col>
                  <el-col :span="13">
                    <el-col :span="24" class="bookName">{{item.author}}</el-col>
                    <el-col :span="24" class="lookNum">
                      <el-col :span="12"></el-col>
                      <el-col :span="12">{{item.sales}}</el-col>
                    </el-col>
                  </el-col>
                </el-col>
              </el-col>
            </li>
          </ul>
        </el-col>
      </el-col>
    </el-row>
    <!--  女生频道  -->
    <el-row class="boy" style="text-align: center" >
      <el-col :span="24"  v-model="woman">
        <h2>女生频道</h2>
        <p>
          <a href="">现代言情</a>|
          <a href="">古代言情</a>|
          <a href="">幻想言情</a>|
          <a href="">青春校园</a>|
          <a href="">更多</a>
        </p>
      </el-col>
      <el-col :span="24" class="content">
        <div></div>
        <!--    左    -->
        <el-col :span="8" class="boyLeft">
          <h3><a href="">{{woman.bookDetail.title}}</a></h3>
          <p>作者: {{woman.bookDetail.author}}</p>
          <p>{{woman.bookDetail.introduction}}</p>
          <div>
            <img :src="woman.bookDetail.url" alt="">
          </div>
        </el-col>
        <!--    中    -->
        <el-col :span="8" class="boyChannel">
          <el-col :span="12" v-for="w in woman.womanGender">
            <div>{{w.title}}</div>
            <p>{{w.author}}</p>
            <p>{{w.introduction}}</p>
          </el-col>
        </el-col>
        <!--   右     -->
        <el-col :span="8" class="right">
          <el-col :span ="24">
            <el-col :span="12"></el-col>
            <el-col :span="12">热销榜</el-col>
          </el-col>
          <ul>
            <li v-for="(item,index) in items2" :key="index" @mouseover="mouseOver2(index)">
              <el-col :span="24" class="close" v-if="displayShow2 != index">
                <el-col :span="2">{{index + 1}}</el-col>
                <el-col :span="22">
                  <el-col :span="15" class="bookName">{{item.author}}</el-col>
                  <el-col :span="9" class="lookNum">
                    <el-col :span="12"></el-col>
                    <el-col :span="12">{{item.sales}}</el-col>
                  </el-col>
                </el-col>
              </el-col>
              <el-col :span="24" class="open" v-if="displayShow2 == index">
                <el-col :span="2">{{index + 1}}</el-col>
                <el-col :span="22">
                  <el-col :span="11" class="bookImg"><img :src="item.url" alt=""></el-col>
                  <el-col :span="13">
                    <el-col :span="24" class="bookName">{{item.author}}</el-col>
                    <el-col :span="24" class="lookNum">
                      <el-col :span="12"></el-col>
                      <el-col :span="12">{{item.sales}}</el-col>
                    </el-col>
                  </el-col>
                </el-col>
              </el-col>
            </li>
          </ul>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  name: 'HomeView',
  data(){
    return {
      publish:{
        bookDetail:{},//一本书详情
        publishLeft:{
          id:"",
          title:"",
          author:"",
          introduction:"",
          url:""
        },
        circleList:[
          {

          }
        ]
      },
      man:
        {
          bookdetail:{//一本书详情
          },
          mangender:[//中间显示
            {
              id:"",
              title:"",
              author:"",
              introduction:""
            },
          ],
        },
      woman:{
        bookDetail:{
        },//一本书详情
        womanGender:{
          id:"",
          title:"",
          author:"",
          introduction:""
        },
      },
      items:[],
      displayShow:0,

      items1:[],
      displayShow1:0,

      items2:[],
      displayShow2:0,

      carouselItems : [
        {
          page:1,items:[],
        }, {
          page:2,items:[],
        },{
          page:3,items:[],
        }
      ],
      carouselActive:0,
      genderMan:{
        gender: "男频"
      },
      genderWoman:{
        gender: "女频"
      },
      genderPublish:{},
      Rotation1:{},
      Rotation2:{},
      Rotation3:{}
    }
  },
  methods: {
    goQircle(id){
      this.$router.push({
        "path":"/top/circleinvitation",
        "query":{
          "id":id
        }
      })
    },
    loadCircleList(){
      let url = 'http://localhost:9080/circles/all'
      this.axios
              .get(url)
              .then((response) => {
                let responseBody = response.data;
                console.log('接收到服务器端响应的结果：');
                console.log(responseBody);
                this.circleList= responseBody.data;
                console.log(this.circleList)
              });
    },
    loadRotationList1(){
      let data = this.qs.stringify(this.Rotation1);
      console.log("准备请求轮播图数据")
      let url = 'http://localhost:9080/books/rotation/4'
      console.log(data)
      this.axios
              .get(url)
              .then((response) => {
                let responseBody = response.data;
                console.log('接收到服务器端响应的结果：');
                console.log(responseBody);
                this.carouselItems[0].items = responseBody.data;
                console.log(this.carouselItems.items)
              });
    },
    loadRotationList2(){
      let data = this.qs.stringify(this.Rotation2);
      console.log("准备请求轮播图数据")
      let url = 'http://localhost:9080/books/rotation/4'
      console.log(data)
      this.axios
              .get(url)
              .then((response) => {
                let responseBody = response.data;
                console.log('接收到服务器端响应的结果：');
                console.log(responseBody);
                this.carouselItems[1].items = responseBody.data;
                console.log(this.carouselItems.items)
              });
    },
    loadRotationList3(){
      let data = this.qs.stringify(this.Rotation3);
      console.log("准备请求轮播图数据")
      let url = 'http://localhost:9080/books/rotation/4'
      console.log(data)
      this.axios
              .get(url)
              .then((response) => {
                let responseBody = response.data;
                console.log('接收到服务器端响应的结果：');
                console.log(responseBody);
                this.carouselItems[2].items = responseBody.data;
                console.log(this.carouselItems.items)
              });
    },
    loadPublishList() {
      let data = this.qs.stringify(this.genderPublish);
      console.log("准备请求开发频道")
      let url = 'http://localhost:9080/books/random/5'
      console.log(data)
      this.axios
              .get(url)
              .then((response) => {
                let responseBody = response.data;
                console.log('接收到服务器端响应的结果：');
                console.log(responseBody);
                this.publish.bookDetail= responseBody.data[0];
                console.log( "开发书详情为：")
                console.log(this.publish.bookDetail)
                this.publish.publishLeft = responseBody.data
                console.log( "开发中间数组为："+this.publish.publishLeft)
                this.publish.publishLeft.splice(0,1)
                console.log( this.publish.publishLeft)
              });
      url = 'http://localhost:9080/books/random/10'
      console.log(data)
      this.axios
              .get(url)
              .then((response) => {
                let responseBody = response.data;
                console.log('接收到服务器端响应的结果：');
                console.log(responseBody);
                this.items = responseBody.data;
                console.log(this.items)
              });
    },
    loadManList() {
      let data = this.qs.stringify(this.genderMan);
      console.log("准备请求男生频道")
      let url = 'http://localhost:9080/books/gender/7?'+data
      console.log(data)
      this.axios
              .get(url)
              .then((response) => {
                let responseBody = response.data;
                console.log('接收到服务器端响应的结果：');
                console.log(responseBody);
                this.man.bookdetail = responseBody.data[0];
                console.log( "书详情为：")
                console.log(this.man.bookdetail)
                this.man.mangender = responseBody.data
                console.log( "中间数组为："+this.man.mangender)
                this.man.mangender.splice(0,1)
                console.log( this.man.mangender)
              });
      url = 'http://localhost:9080/books/gender/10?'+data
      console.log(data)
      this.axios
              .get(url)
              .then((response) => {
                let responseBody = response.data;
                console.log('接收到服务器端响应的结果：');
                console.log(responseBody);
                this.items1 = responseBody.data;
                console.log(this.items1)
              });
    },
    loadWomanList() {
      let data = this.qs.stringify(this.genderWoman);
      console.log("准备请求女生频道")
      let url = 'http://localhost:9080/books/gender/7?'+data
      console.log(data)
      this.axios
              .get(url)
              .then((response) => {
                let responseBody = response.data;
                console.log('接收到服务器端响应的结果：');
                console.log(responseBody);
                this.woman.bookDetail= responseBody.data[0];
                console.log( "女频书详情为：")
                console.log(this.woman.bookDetail)
                this.woman.womanGender = responseBody.data
                console.log( "女频中间数组为："+this.woman.womanGender)
                this.woman.womanGender.splice(0,1)
                console.log( this.woman.womanGender)
              });
      url = 'http://localhost:9080/books/gender/10?'+data
      console.log(data)
      this.axios
              .get(url)
              .then((response) => {
                let responseBody = response.data;
                console.log('接收到服务器端响应的结果：');
                console.log(responseBody);
                this.items2 = responseBody.data;
                console.log(this.items2)
              });
    },

    // 移入
    mouseOver(index) {
      this.displayShow = index;
    },
    mouseOver1(index) {
      this.displayShow1 = index;
    },
    mouseOver2(index) {
      this.displayShow2 = index;
    },
    carouselMouseOver(item,index){
      this.carouselActive = index;
      console.log(item,index)
    }
  },
  mounted() {
    this.loadManList();
    this.loadWomanList();
    this.loadPublishList();
    this.loadRotationList1();
    this.loadRotationList2();
    this.loadRotationList3();
    this.loadCircleList()
  }
}
</script>
<style>
.carousel{
  width: 100%;
  height: 332px;
  background-image:url("../assets/bg.gif") ;
}
.carousel > div > div{
  width: 1000px;
  margin: 0 auto;
  padding: 0;
}
.carousel > div > div > div{
  height: 332px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 332px;
  margin: 0;
}
.carouselPage{
  padding-top: 30px;
}
.carouselPage > div:nth-child(1){
  font-size: 24px;
  padding: 6px 0;
  color: #ffffff;
}
.carouselPage > div:nth-child(1):hover{
  color: #f26552;
}
.carouselPage > div:nth-child(2){
  font-size: 20px;
  padding: 10px 0 0;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.3;
}
.carouselPage > div:nth-child(3){
  padding-top: 26px;
}
.carouselPage > div:nth-child(3) > div{
  width: 629px;
  height: 209px;
  margin: 0 auto;
}
.carouselPage > div:nth-child(3) > div > div{
  padding: 5px 20px;
}
.carouselPage > div:nth-child(3) > div > div img{
  width: 100%;
}
.carouselPage > div:nth-child(3) > div > div:hover{
  padding: 0 15px;
}
.main{
  width: 1000px;
  margin: 0 auto;
  padding: 0;
}
.main > div:nth-child(1){
  padding: 44px 0 30px 0;
}
.main > div:nth-child(1) > h2{
  font-size: 26px;
  color: #212121;
  margin: 0;
}
.main > div:nth-child(1) > p{
  margin: 10px 0 0 0;
  color: #9e9e9e;
}
.main > div:nth-child(1) > p > a{
  font-size: 12px;
  margin: 0 5px;
  color: #9e9e9e;
}
.content{
  background-color: #fff;
  position: relative;
}
.content > div:nth-child(1){
  position: absolute;
  top:0;
  left: 0;
  background-image: url("../assets/icon.png");
  background-repeat: no-repeat;
  background-position: -26px 0;
  width: 63px;
  height: 63px;
}
.left{
  width: 358px !important;
  padding: 45px 56px 0;
  text-align: left;
}
.left > h3 > a{
  font-size: 20px;
  color: #000000;
}
.left > h3 > a:hover{
  color: #f26552;
}
.left > p{
  font-size: 12px;
  color: #9e9e9e;
  margin: 10px 0 20px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:4;
}
.left > p:nth-child(3){
  margin: 0 0 94px;
}
.left > div{
  text-align: right;
}
.center{
  width: 358px !important;
  border-left: 1px solid #f0f0f0;
}
.imgList>img{
  width: 102px;
  height: 136px;
}
.imgList>p{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
}
.center > div{
  padding: 40px 38px 42px;
  border-right: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}
.center >div > p{
  font-size: 12px;
  color: #212121;
  text-align: left;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.center > div > p:nth-child(3){
  color: #9e9e9e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.right{
  width: 283px !important;
  padding: 28px 30px 0 30px;
  font-size: 12px;
  color: #9e9e9e;
}
.right>div>div:nth-child(1){
  height: 18px;
  width: 21px;
  background-image: url("../assets/icon.png");
  background-repeat: no-repeat;
  background-position: 0 -68px;
  margin-top: 4px;
}
.right>div>div:nth-child(2){
  color: #212121;
  font-size: 20px;
  text-align: left;
  padding: 0 0 0 10px;
}
.close{
  height: 35px;
  line-height: 35px;
  text-align: left;
}
.close > div:nth-child(2){
  border-bottom: 1px solid #f0f0f0;
}
.close .bookName{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.close .lookNum>div:nth-child(1){
  height: 9px;
  width: 14px;
  background-image: url("../assets/icon.png");
  background-repeat: no-repeat;
  background-position: -86px -73px;
  margin-top: 13px;
}
.close .lookNum>div:nth-child(2){
  padding-left: 5px;
}
.open{
  text-align: left;
  padding-top: 16px;
}
.open .bookImg>img{
  width: 63px;
  height: 84px;
}
.open .bookName{
  color: #212121;
  font-size: 12px;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:2;
}
.open .lookNum{
  line-height: 16px;
}
.open .lookNum>div:nth-child(1){
  height: 9px;
  width: 14px;
  background-image: url("../assets/icon.png");
  background-repeat: no-repeat;
  background-position: -86px -73px;
  margin-top: 5px;
}
.open .lookNum>div:nth-child(2){
  padding-left: 5px;
}
.sel_Cir{
  width: 1000px;
  margin: 0 auto;
}
.sel_Cir>div:nth-child(1){
  padding: 44px 0 30px 0;
}
.cirBig{
  background-color: #ffffff;
}
.cirBig>div{
  padding-top: 50px;
  height: 292px;
  border-right: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}
.cirBig>div>div:nth-child(1){
  width: 80px;
  height: 80px;
  margin: 0 auto;
}
.cirBig>div>div:nth-child(1)>img{
  width: 100%;
  border-radius: 50%;
}
.cirBig>div>div:nth-child(2){
  font-size: 18px;
  color: #212121;
  margin-top: 16px;
  margin-bottom: 8px;
}
.cirBig>div>div:nth-child(3){
  font-size: 12px;
  color: #9e9e9e;
}
.cirBig>div>div:nth-child(4){
  margin-top: 20px;
}
.cirBig>div>div:nth-child(4)>span:nth-child(1){
  height: 18px;
  width: 17px;
  background-image: url("../assets/icon.png");
  background-repeat: no-repeat;
  background-position: -49px -68px;
  display: inline-block;
}
.cirBig>div>div:nth-child(4)>span:nth-child(2){
  width: 50px;
  display: inline-block;
}
.cirBig>div>div:nth-child(4)>span:nth-child(3){
  height: 18px;
  width: 17px;
  background-image: url("../assets/icon.png");
  background-repeat: no-repeat;
  background-position: -68px -68px;
  display: inline-block;
}
.cirBig>div>div:nth-child(4)>span:nth-child(4){
  width: 50px;
  display: inline-block;
}
.zwtit{
  background-color: #fff;
}
.zwtit>div:nth-child(1){
  padding-top: 22px;
  padding-bottom: 20px;
}
.zwtit>div:nth-child(1)>img{
  width: 149px;
}
.zwtit>div:nth-child(2)>div>div{
  width: 20%;
  padding-left: 30px;
  padding-bottom: 30px;
}
.zwtit>div:nth-child(2)>div>div>div:nth-child(1){
  width: 60px;
  height: 60px;
}
.zwtit>div:nth-child(2)>div>div>div:nth-child(1)>img{
  width: 100%;
  border-radius: 50%;
}
.zwtit>div:nth-child(2)>div>div>div:nth-child(2)>p:nth-child(1){
  margin-top: 10px;
  font-size: 16px;
}
.zwtit>div:nth-child(2)>div>div>div:nth-child(2)>p:nth-child(2){
  font-size: 12px;
  color: #9e9e9e;
}
.boy {
  width: 1000px;
  margin: 0 auto;
  padding: 0;
}
.boy > div:nth-child(1){
  padding: 44px 0 30px 0;
}
.boy > div:nth-child(1) > p {
  font-size: 12px;
  margin: 10px 0 0 0;
  color: #9e9e9e;
}
.boy > div:nth-child(1) > p > a{
  font-size: 12px;
  margin: 0 5px;
  color: #9e9e9e;
}
.boyLeft {
  width: 358px !important;
  padding: 45px 56px 0;
  text-align: left;
}
.boyLeft > h3 > a{
  font-size: 20px;
  color: #000000;
}
.boyLeft > h3 > a:hover{
  color: #f26552;
}
.boyLeft > p{
  font-size: 12px;
  color: #9e9e9e;
  margin: 10px 0 20px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:4;
}
.boyLeft > p:nth-child(3){
  margin: 0 0 94px;
}
.boyLeft > div{
  text-align: right;
  padding: 26px 18px ;
}
.boyChannel{
  width: 358px !important;
  border-left: 1px solid #f0f0f0;
}
.boyChannel>div{
  height: 176px;
  padding: 26px 18px 26px;
  border-right: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}
.boyChannel>div>div{
  font-size: 14px;
  border-bottom: 1px solid #f0f0f0;
  padding: 0 0 4px;
  white-space: nowrap;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}
.boyChannel>div>p{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:4;
  font-size: 12px;
  color: #9e9e9e;
  text-align: left;
}
.boyChannel>div>p:nth-child(2){
  margin: 6px 0 10px;
}

.boyRight{
  width: 283px !important;
}
</style>
